<script setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { useRequest } from '@/hooks'

const props = defineProps({
  modelValue: Boolean,
  detail: Object,
  deviceGroups: {
    type: Array,
    default: () => []
  },
  aiVersions: {
    type: Array,
    default: () => []
  },
  appVersions: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['submit', 'update:modelValue'])
const dialogVisible = useVModel(props, 'modelValue', emits)

const ruleForm = ref({
  deviceName: '',
  deviceCode: '',
  deviceIp: '',
  deviceGroupId: '',
  deviceStatus: 1,
  deviceAiId: '',
  deviceAppId: '',
  deviceDescribe: ''
})
const rules = {
  deviceCode: {
    required: true,
    message: '请输入设备编码',
    trigger: 'change'
  },
  deviceName: {
    required: true,
    message: '请输入设备名称',
    trigger: 'change'
  },
  deviceIp: {
    required: true,
    message: '请输入设备IP',
    trigger: 'change'
  },
  deviceGroupId: {
    required: true,
    message: '请选择设备分组',
    trigger: 'change'
  },
  deviceStatus: {
    required: true,
    message: '请选择在线状态',
    trigger: 'change'
  },
  deviceAppId: {
    required: true,
    message: '请选择应用版本',
    trigger: 'change'
  },
  deviceAiId: {
    required: true,
    message: '请选择AI版本',
    trigger: 'change'
  }
}

const ruleFormRef = ref()
const handleSubmit = async () => {
  await ruleFormRef.value.validate()
  emits('submit', ruleForm.value)
}

const handleClose = done => done()

const handleOpen = () => {
  ruleFormRef.value.resetFields()

  if (props.detail) {
    Object.assign(ruleForm.value, props.detail)
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="768px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-bind="$attrs"
    @open="handleOpen"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="right"
      label-suffix="："
    >
      <el-form-item label="设备编码" prop="deviceCode">
        <el-input v-model.trim="ruleForm.deviceCode" clearable />
      </el-form-item>
      <el-form-item label="设备IP" prop="deviceIp">
        <el-input v-model.trim="ruleForm.deviceIp" clearable />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model.trim="ruleForm.deviceName" clearable />
      </el-form-item>
      <el-form-item label="设备分组" prop="deviceGroupId">
        <el-select v-model="ruleForm.deviceGroupId" filterable clearable>
          <el-option
            v-for="item in deviceGroups"
            :key="item.id"
            :label="item.groupName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatus" required>
        <el-radio-group v-model="ruleForm.deviceStatus">
          <el-radio :value="1">在线</el-radio>
          <el-radio :value="0">离线</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="应用版本" prop="deviceAppId" required>
        <el-select v-model="ruleForm.deviceAppId" filterable clearable>
          <el-option
            v-for="item in appVersions"
            :key="item.id"
            :label="item.appName"
            :value="item.id"
          >
            <span style="float: left">{{ item.appName }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
            >
              {{ item.appVersion }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="AI版本" prop="deviceAiId" required>
        <el-select v-model="ruleForm.deviceAiId" filterable clearable>
          <el-option
            v-for="item in aiVersions"
            :key="item.id"
            :label="item.aiName"
            :value="item.id"
          >
            <span style="float: left">{{ item.aiName }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
            >
              {{ item.aiVersion }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="设备描述" prop="deviceDescribe">
        <el-input
          v-model="ruleForm.deviceDescribe"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
